<template>
   <div class="app-container">
     <el-row :gutter="20">
      <el-col :span="18" :xs="24">
        <div class="search">
          <el-col :span="12">
            <el-button size="mini" type="primary" @click="addRow">添加</el-button>
            <el-button size="mini" type="primary" @click="removeRows">删除</el-button>
            <el-button size="mini" type="primary" @click="loadTableRows">刷新</el-button>
          </el-col>
        </div>

          <el-table
            ref="multipleTableRef"
            v-loading="loading"
            :data="tableRows"
            highlight-current-row
            @selection-change="selectionChange"
            @current-change="currentChange"
          >
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column prop="name" label="名称" width="150" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="150px">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="editRow(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="removeRow([scope.row])">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页工具条 -->
          <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="searchData.pageNum"
            v-model:limit="searchData.pageSize"
            @pagination="loadTableRows"
          />
      </el-col>
       <el-col :span="6" :xs="24">
          <treeComp :props="currentRow" ></treeComp>
      </el-col>
    </el-row>
    <addComp :data="addCompProps" @callback="callback" ></addComp>
    
  </div>
</template>

<script lang="ts">
export default {
  name: 'appMng'
};
</script>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watchEffect, onMounted, getCurrentInstance, toRefs } from 'vue'
    import { ElTree, ElMessage } from 'element-plus';
    import { Document, Folder, Plus, Edit, Delete } from '@element-plus/icons-vue';

    /****子组件引入****/
    import addComp from './add.vue';
    import editComp from './edit.vue';
    import treeComp from './tree.vue';
   

    /*****请求组件引入****/
    import { appSearch, removeApp } from '@/api/app';

   // const deptTreeRef = ref(ElTree); 
    const state = reactive({
      tableRows: [],
      total: 0,
      searchData: {pageNum:1,pageSize:10},
      loading: false,
      ids: [],
      currentRow:null,
      addCompProps:{data:{},visible:false},
      treeComp:{data:{},visible:false}
    });
    const {
      tableRows,
      searchData,
      total,
      loading,
      currentRow,
      addCompProps,
      addNodeCompProps,
    } = toRefs(state);

    function loadTableRows(){
      state.loading = true;
      appSearch(state.searchData).then(response =>{
        state.tableRows = response.data.list;
        state.total = response.data.total;
        state.loading=false;
      });
    }

    function selectionChange(selection: any) {
      state.ids = selection.map((item: any) => item.id);
    }

    function currentChange(row: any){
       state.currentRow = row;
    }

    //添加修改回调
    function callback(callData) {
      state.addCompProps.visible = false;
      if(!callData.refresh){
        return;
      }
      loadTableRows();
    }

    function addRow() {
      //初始化，重新传递值，防止子组件，数据变化无法检查到
      state.addCompProps.visible = true;
      state.addCompProps.data = {formId: state.searchData.formId};
    };

    function removeRows(){
       removeApp(state.ids).then(response =>{
          ElMessage.success("删除成功");
          loadTableRows();
       });
    }
    
    onMounted(() => {
        loadTableRows();
    });
  
</script>

<style></style>